<!-- 数字滚动组件 -->
<template>
	<div class="box-item">
		<li
			:class="{
				'number-item': !isNaN(item),
				'mark-item': isNaN(item)
			}"
			v-for="(item, index) in runningDays"
			:key="index"
		>
			<span v-if="!isNaN(item)">
				<i ref="numberItem">0123456789</i>
			</span>
			<span class="comma" v-else>{{ item }}</span>
		</li>
	</div>
</template>
<script setup name="templateName">
	import { onMounted, nextTick, defineProps } from 'vue'
	// ===========================================COMPONENTS===============================================
	// ===========================================PROPS=====================================================
	const props = defineProps({
		num: {
			type: String,
			default: '0'
		}
	})

	// ===========================================COMPUTED==================================================
	// ===========================================DATA======================================================
	let runningDays = ref([])
	let numberItem = ref()
	// ===========================================WATCH=====================================================
	watch(
		() => props.num,
		(newVal, oldVal) => {
			if (newVal !== oldVal) {
				toRunningNum(newVal)
			}
		}
	)
	// ===========================================LIFECYCLE HOOKS===========================================
	onMounted(() => {
		nextTick(() => {
			toRunningNum(props.num) // 这里输入数字即可调用
			// setNumberTransform()
		})

		// setInterval(() => {
		// 	// 取随机数并添加千位分隔符
		// 	let randomNum = Math.floor(Math.random() * 1000000)
		// 		.toLocaleString()
		// 	toRunningNum(randomNum)
		// 	setNumberTransform()
		// }, 3000)
	})
	// ===========================================METHODS==================================================
	// 设置文字滚动
	const setNumberTransform = () => {
		const numberItems = numberItem.value
        const numberArr = runningDays.value.filter((item) => !isNaN(item) && item !== '.')
		let currentIndex = 0
		for (let i = 0; i < numberItems?.length; i++) {
			const elem = numberItems[i]
			// 只对数字设置transform
			if (elem) {
				elem.style.transform = `translate(-50%, -${numberArr[currentIndex] * 10}%)`
				currentIndex++
			}
		}
	}
	// 处理数字
	const toRunningNum = (num) => {
		// 将数字转换为字符串并分割成数组
        runningDays.value = num.toString().split('')
		nextTick(() => {
			setNumberTransform()
		})
	}
	// ===========================================REQUEST==================================================
</script>
<style lang="less" scoped>
	.box-item {
		display: inline-block;
		position: relative;
		height: 42px;
		font-size: 32px;
		line-height: 32px;
		font-weight: 700;
		text-align: center;
		list-style: none;
		// color: #2d7cff;
		color: #fff;
		writing-mode: vertical-lr;
		text-orientation: upright;
		/*文字禁止编辑*/
		-moz-user-select: none; /*火狐*/
		-webkit-user-select: none; /*webkit浏览器*/
		-ms-user-select: none; /*IE10*/
		-khtml-user-select: none; /*早期浏览器*/
		user-select: none;
		/* overflow: hidden; */
	}

	/* 默认逗号设置 */
	.mark-item {
		width: 8px;
		position: relative;
		// background: rgb(7, 50, 207);
		& > span {
			position: absolute;
			width: 100%;
			bottom: 8px;
			writing-mode: vertical-rl;
			text-orientation: upright;
			transform: translateX(12px);
		}
	}

	/*滚动数字设置*/
	.number-item {
		width: 20px;
		height: 32px;
		list-style: none;
		// background: rgb(7, 50, 207);
		color: #fff;
		& > span {
			position: relative;
			display: inline-block;
			margin-right: 10px;
			width: 100%;
			height: 100%;
			writing-mode: vertical-rl;
			text-orientation: upright;
			overflow: hidden;
			& > i {
				font-style: normal;
				position: absolute;
				top: -6px;
				left: 50%;
				transform: translate(-50%, 0);
				transition: transform 1s ease-in-out;
			}
		}
	}
</style>
